﻿@{
    Layout = null;
}
<section id="arena">
    <div id="rival">
        <ul class="power">
            <% _.each(RivalPower, function(rivalPower) { %>
                <li class="<%=rivalPower.Name %>"><%=rivalPower.Count %> </li>
             <% });%>
        </ul>
        <ul class="warriors">
            <% for (var index = 0; index < 6; index++){ %>
            <li position="<%=index%>">
                <div health="<%=RivalWariors[index].Health%>" class="card off <%=RivalWariors[index].Name%>">

                </div>
            </li>
            <%}%>
        </ul>
    </div>
    <div id="own">
        <ul class="warriors">
            <% for (var index = 0; index < 6; index++){ %>
            <li position="<%=index%>">
                <div health="<%=OwnerWariors[index].Health%>" class="card on <%=OwnerWariors[index].Name%>">

                </div>
            </li>
            <%}%>
        </ul>
        <ul class="power">
            <% _.each(OwnerPower, function(ownerPower) { %>
                <li class="<%=ownerPower.Name %>"><%=ownerPower.Count %> </li>
             <% });%>
        </ul>
    </div>

</section>
<section id="cards">
    <ul class="water">
        <li>
            <div class="card empty off">
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
        <li>
            <div class="card GoblinBerserker on">
                <span class="cost">3</span>
                <span class="damage">3</span>
                <span class="health">13</span>
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
    </ul>
    <ul class="fire">
        <li>
            <div class="card empty off">
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
        <li>
            <div class="card GoblinBerserker off">
                <span class="cost">13</span>
                <span class="damage">13</span>
                <span class="health">13</span>
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
    </ul>
    <ul class="erth">
        <li>
            <div class="card empty off">
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
        <li>
            <div class="card GoblinBerserker off">
                <span class="cost">13</span>
                <span class="damage">3</span>
                <span class="health">3</span>
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
    </ul>
    <ul class="air">
        <li>
            <div class="card empty off">
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
        <li>
            <div class="card GoblinBerserker off">
                <span class="cost">3</span>
                <span class="damage">13</span>
                <span class="health">3</span>
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
    </ul>
    <ul class="special">
        <li>
            <div class="card empty off">
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
         <li>
            <div class="card GoblinBerserker on">
                <span class="cost">3</span>
                <span class="damage">3</span>
                <span class="health">13</span>
            </div>
        </li>
        <li>
            <div class="card empty on">
            </div>
        </li>
    </ul>
</section>